<template>
  <van-list v-model:loading="item.loading" finished>
    <div v-for="item in 3" class="xushou-item" :key="item">
      <van-cell title="续期收费服务" is-link to="index" />
      <div class="item-cel-box">
        <label class="item-label">保单号</label>
        <span>GY880986541234678</span>
      </div>
      <div class="item-cel-box">
        <label class="item-label">计划服务日期</label>
        <span>2024-07-09</span>
      </div>
      <div class="item-cel-box">
        <label class="item-label">实际服务日期</label>
        <span>-</span>
      </div>
      <div class="item-cel-box">
        <label class="item-label">实际服务方式</label>
        <span>线下拜访</span>
      </div>
      <van-button @click="" icon="plus" type="primary" size="large">添加服务记录</van-button>
    </div>
  </van-list>
</template>

<script setup name="RenewalFee">
import { getCurrentInstance, ref, reactive, toRefs, onMounted } from "vue";

const props = defineProps({
  item: Object,
});
console.log(props);
</script>

<style scoped lang="scss">
.xushou-item {
  position: relative;
  background: #fff;
  :deep(.van-cell::after) {
    border-bottom: none;
  }
  :deep(.van-cell__title) {
    color: #162032;
    font-size: 16px;
    font-weight: 500;
    margin-top: 6px;
  }
  :deep(button) {
    background: #f2f7fc;
    height: 38px;
    font-size: 14px;
    border-radius: 636px;
    color: #2e7df3;
    margin: 12px 16px;
    width: calc(100% - 32px);
    border: none;
  }
  .item-cel-box {
    font-size: 14px;
    label {
      display: inline-block;
      text-align: left;
      margin-left: 16px;
      width: 140px;
      color: #666666;
    }
    span {
      font-weight: 500;
    }
  }
  .item-cel-box + .item-cel-box {
    margin-top: 10px;
  }
}
</style>